<template>
    <div class="cart page">
        <div class="bg"  v-if="!cartItems||cartItems.length<1">
            <img class="img" src="@/assets/cart.png" alt="">
            <div @click="turn('/home')" class="buy">去逛逛</div>
        </div>

        <div class="con">
            <div class="items" v-if="cartItems">
                <div class="item border-bottom-1px" v-for="(item,index) in cartItems" :key="item.id">
                    <div class="sbt" @click="selectItem(index)">
                        <span v-if="!item.selected" class="iconfont iconweixuanzhong"></span>
                        <span v-else class="iconfont iconxuanzhong"></span>
                    </div>
                    <img class="img" :src="imgH+item.img" alt="">
                    <div class="info">
                        <div class="name">{{item.goodsName}}</div>
                        <div class="sku-info" >
                            {{item.skuName?item.skuName:'默认'}}
                        </div>
                        <div class="price">¥{{item.nowPrice}}</div>
                        <span class="iconfont iconcha" @click="deleteCart(item.id,index)"></span>
                        <num-input @change="changeCart(index)" class="inp" v-model="item.quantity"></num-input>
                    </div>

                </div>
            </div>
            <cart-bar v-if="cartItems&&cartItems.length>0" :selected="totalCartInfo[2]" @selectAll="selectAll" :total="totalCartInfo[0]" :desc="totalCartInfo[1]" @commit="commit"></cart-bar>
        </div>

    </div>
</template>

<script>
    import numInput from "@/components/base/num-input"
    import cartBar from "@/components/cart-bar"
    import {listCart,addCart,deleteCart} from "@/api/cart";
    import {changeCart,changeAll} from "../../api/cart";
    import {mapActions} from 'vuex'
    export default {
        activated(){

            listCart().then(res=>{
                this.cartItems = res.data
            })

        },
        watch:{
            cartItems(){
                let count = 0
                this.cartItems.forEach(cart=>{
                    count+=cart.quantity
                })
                this.updateCartCount(count)
            }
        },
        data(){
            return {
                imgH:process.env.VUE_APP_IMG_DOMAIN,
                cartItems:[]
            }
        },
        methods:{
            turn(path){
                this.$router.push(path)
            },
            ...mapActions([
               'updateCartCount'
            ]),
            selectAll(){//全选
                let selected = this.totalCartInfo[2]
                changeAll(!selected).then(res=>{
                    this.cartItems.forEach(cart=>{
                        cart.selected = !selected
                        // this.$set(cart,'selected',!selected)

                    })
                })
            },
            commit(){
                if(this.selectItemCount>0){
                    this.$router.push({
                        path:"commit"
                    })
                }
            },
            selectItem(index){
                let item = this.cartItems[index]
                changeCart(item.id,item.quantity,!item.selected).then(res=>{
                    item.selected = !item.selected
                })
            },
            deleteCart(id,index){
                //删除
                deleteCart(id).then(res=>{
                    this.cartItems.splice(index,1)
                })
            },
            changeCart(index){
                let item = this.cartItems[index]
                if(item.quantity>0){
                    changeCart(item.id,item.quantity,item.selected).then(res=>{
                        //触发监听
                        this.cartItems = this.cartItems.concat([])
                    })
                }else {
                    //删除
                    deleteCart(item.id).then(res=>{
                        this.cartItems.splice(index,1)
                    })
                }

            }
        },
        computed:{
            selectItemCount(){
                let count = 0
                this.cartItems.forEach(cart=>{
                    if(cart.selected){
                        count++
                    }
                })
                return count
            },
            totalCartInfo(){//总购物车信息计算  总价格 总优惠 是否是全选
                let totaNowPrice = 0
                let totaOldPrice = 0
                let selectAll = true
                this.cartItems.forEach(cart=>{
                    if(!cart.selected){
                        selectAll = false
                        return;
                    }
                    totaNowPrice+=cart.nowPrice*cart.quantity
                    totaOldPrice+=cart.oldPrice*cart.quantity
                })
                return [totaNowPrice.toFixed(2),(totaOldPrice-totaNowPrice).toFixed(2),selectAll]
            }

        },
        components:{
            numInput,cartBar
        }
    }
</script>

<style scoped lang="stylus">



.cart
    z-index 1
    height 100%
    background url("~@/assets/cbg.png") no-repeat
    background-size 100% auto
    .bg
        position absolute
        display flex
        flex-direction column
        align-items center
        justify-content center
        padding-top 100px
        .img
            width 80%
        .buy
            margin-top 10px
            width:150px;
            height:34px;
            background:rgba(240,200,8,1);
            border-radius:17px;
            font-size:15px;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height 34px
            text-align center
    .con
        padding-top 10px
        padding-bottom 44px
        .items
            padding 0 10px
            .item
                background-color white
                padding 23px 20px 22px 0
                border-color $border-split-color
                display flex
                align-items center
                .sbt
                    flex  0 0 32px
                    display flex
                    align-items center
                    justify-content center
                    .iconfont
                        font-size 16px
                        color #B1B1B1
                 .img
                    border-radius 5px
                    width 90px
                    height 90px
                    flex 0 0 90px
                 .info
                    overflow hidden
                    position relative
                    flex 1
                    padding 5px 20px 5px 10px
                    .name
                        overflow hidden
                        white-space nowrap
                        text-overflow ellipsis
                        color #4E3D07
                        font-size 12px
                        font-weight 300
                        line-height 12px
                    .sku-info
                        width fit-content
                        padding 7px 8px
                        background-color #FBFAFA
                        color $font-color-light
                        font-size 11px
                        line-height 11px
                        margin 12px 0 17px
                    .price
                        color #4E3D07
                        font-size 12px
                        line-height 12px
                    .iconcha
                        position absolute
                        right 0
                        top 0
                        color #B1B1B1
                        font-size 11px
                    .inp
                        position absolute
                        right 0
                        bottom  1px


</style>
